<%--<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>plant-planet</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<%--	<meta name="apple-mobile-web-app-capable" content="yes">--%>
	<%--	<meta name="apple-mobile-web-app-status-bar-style" content="black">--%>
	<!--标准mui.css-->
	<link rel="stylesheet" href="extends/mui/m190526/css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="extends/mui/m190526/css/app.css"/>
	<link rel="stylesheet" type="text/css" href="extends/mui/m190526/css/mui.imageviewer.css"/>
	<link rel="stylesheet" type="text/css" href="extends/css/index/index-imgview.css">
	<%--   icon --%>
	<link rel="icon" type="image/png" href="favicon.ico"/>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
	<link rel="bookmark" type="image/x-icon" href="favicon.ico"/>
	<%--   icon --%>
	<style type="text/css">

		.mui-content{div{
			             -webkit-user-select:text;
		             }
		p{
			-webkit-user-select:text;
		}
			margin:60px auto 0;
		}
		.mui-bar{
			background-color:#0f0f0f;
		}
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-pull-left"></a>
	<h1 class="mui-title" style="color:ghostwhite">PLANT-PLANET</h1>
</header>
<div class="mui-content">
	<%--  提交	--%>
	<div class="mui-card">
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<%--				--%>
				<label>商户单号:
					<input type="text" name="busNo" value="" placeholder="商户单号，如:12345">
				</label>
				<label>充值金额（元）:
					<input type="text" name="opFare" value="" placeholder="充值金额，如:10">
				</label>
				<label>卡号:
					<input type="text" name="cardNo" value="" placeholder="卡号，如:123">
				</label>
				<input type="button" value="提交" onclick="myMoney(0)">
				<input type="button" value="查询" onclick="myMoney(2)">
				<input type="button" value="查看处理结果" onclick="showHandlerResult(3)">
				<%--<input type="file" name="logoFile" id="logoFile" readonly="readonly" disabled="disabled" onchange="setExcel(this);">--%>
				<%--	--%>
			</div>
		</div>
	</div>
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-collapse">
			<a class="mui-navigate-right" href="#">等待提交</a>
			<div class="mui-collapse-content">
				<%--  等待提交	--%>
				<div class="mui-card">
					<div class="mui-card-header">等待提交</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<div id="result">
							</div>
						</div>
					</div>
				</div>
			</div>
		</li>
		<li class="mui-table-view-cell mui-collapse">
			<a class="mui-navigate-right" href="#">处理中</a>
			<div class="mui-collapse-content">
				<%--  处理中	--%>
				<div class="mui-card">
					<div class="mui-card-header">处理中</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<div id="resultIng">
							</div>
						</div>
					</div>
				</div>
			</div>
		</li>
		<li class="mui-table-view-cell mui-collapse">
			<a class="mui-navigate-right" href="#">已经完成</a>
			<div class="mui-collapse-content">
				<%--  已经完成	--%>
				<div class="mui-card">
					<div class="mui-card-header">处理完成</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<div id="resultOk">
							</div>
						</div>
					</div>
				</div>
			</div>
		</li>
		<li class="mui-table-view-cell mui-collapse">
			<a class="mui-navigate-right" href="#">操作说明</a>
			<div class="mui-collapse-content">
				<p style="font-size:30px;color:red;margin-top:10px">点击图片查看操作说明：</p>
				<img src="extends/img/tmp-ocr/t1.png" data-preview-src="" data-preview-group="1" style="width:400px;height:500px" alt="操作说明">
				<p style="font-size:30px;color:red;margin-top:10px">重点说明：</p>
				<p>1.提交之后需要孩子到机器上贴卡才能到账，只要提交了今天肯定会处理完</p>
				<p>2.信息只能提交一次，请务必核实好信息再提交，一共只有三个内容，商户单号，充值金额，和卡号</p>
				<p>3.提交之后核实一下信息是否有误，有误微信群里联系我修改！</p>
			</div>
		</li>
	</ul>
</div>
<script src="extends/mui/m190526/js/mui.min.js"></script>
<script src="extends/jquery/jquery-3.4.1.min.js"></script>
<script src="extends/jquery/jquery-migrate-1.4.1.min.js"></script>
<script src="extends/mui/m190526/js/mui.zoom.js"></script>
<script src="extends/mui/m190526/js/mui.previewimage.js"></script>
<script type="text/javascript">
	let eleResult = $('#result');
	let eleResultIng = $('#resultIng');
	let eleResultOk = $('#resultOk');
</script>
<%--jquery--%>
<script type="text/javascript">
	$(function(){
		mui.init();
		mui.previewImage();
		list(1);
		$.post();
	})
</script>
<%--方法区--%>
<script type="text/javascript">
	//
	function showHandlerResult(myType){
		// mui.ajax('/showResult',//
		// 	{
		// 		data:{},
		// 		dataType:'json',//服务器返回json格式数据
		// 		type:'post',//HTTP请求类型
		// 		timeout:10000,//超时时间设置为10秒；
		// 		headers:{'Content-Type':'application/json'},
		// 		success:function(data){
		// 			//服务器返回响应，根据响应结果，分析是否登录成功；
		// 			console.log(data);
		// 		},
		// 		error:function(xhr,type,errorThrown){
		// 			//异常处理；
		// 			console.log(type);
		// 		}
		// 	});

		window.location="${pageContext.request.contextPath}/showResult"
	}
	// pinke
	function myMoney(myType){
		let val_busNo = $('.mui-card-content-inner input[name=busNo]').val();
		let val_cardNo = $('.mui-card-content-inner input[name=cardNo]').val();
		let val_opFare = $('.mui-card-content-inner input[name=opFare]').val();
		console.log("val_busNo:"+val_busNo);
		console.log("val_cardNo:"+val_cardNo);
		console.log("val_opFare:"+val_opFare);
		if(val_busNo==='' || val_cardNo==='' || val_opFare===''){
			mui.alert("请输入相应的内容");
			return;
		}
		$.ajax({
			type:"POST",
			url:"/record",
			data:{
				'busNo':val_busNo,
				'cardNo':val_cardNo,
				'opFare':val_opFare,
				'currstatues':0,
				'type':myType
			},
			cache:false,
			dataType:"json",
			success:function(ret){
				console.log("bf go 1:"+myType);
				// 去查结果
				if(myType===0){
					list(1);
					if(ret===0){
						mui.alert('信息不存在');
					}
					else{
						mui.alert('提交成功,请在下方待处理区域查看');
					}
				}
				else if(myType===2){
					console.log("ret:"+ret);
					console.log("ret:"+ret['transid']);
					clearResultDiv();
					if(ret['currstatues']===0){
						if(ret['cardno']===0){
							eleResult.append("<p style=''>"+'  交易单号:'+ret['transid']+"</p>");
							eleResult.append("<p style=''>"+" 商户单号:"+ret['busno']+'  卡号:'+ret['cardno']+'  充值金额:'+ret['opfare']+"</p>");
							eleResult.append("<p style=''>"+'  处理状态:'+"等待提交"+"</p>");
						}
						else{
							eleResultIng.append("<p style='color:black'>"+'  交易单号:'+ret['transid']+"</p>");
							eleResultIng.append("<p style='color:black'>"+" 商户单号:"+ret['busno']+'  卡号:'+ret['cardno']+'  充值金额:'+ret['opfare']+"</p>");
							eleResultIng.append("<p style='color:black'>"+'  处理状态:'+"处理中"+"</p>");
						}
					}
					else{
						eleResultOk.append("<p style='color:green'>"+'  交易单号:'+ret['transid']+"</p>");
						eleResultOk.append("<p style='color:green'>"+" 商户单号:"+ret['busno']+'  卡号:'+ret['cardno']+'  充值金额:'+ret['opfare']+"</p>");
						eleResultOk.append("<p style='color:green'>"+'  处理状态:'+"处理完成"+"</p>");
					}
				}
			},
			error:function(XMLHttpRequest,textStatus,errorThrown){
				mui.alert(errorThrown,"上传失败，请检查网络后重试...");
			}
		});
	}
	//
	function list(myType){
		clearResultDiv();
		$.ajax({
			type:"POST",
			url:"/record",
			data:{
				'type':myType
			},
			cache:false,
			// contentType:false,    //不可缺
			// processData:false,    //不可缺
			dataType:"json",
			success:function(e){
				// 使用eval来转换JSON字符获得一个json对象
				let json = eval(e);
				//遍历json数组时，这么写p为索引，0,1;    p是变量、jsonObj是对象
				for(let p in json){
					if(json.hasOwnProperty(p)){
						if(json[p]['currstatues']===0){
							if(json[p]['cardno']===0){
								eleResult.append("<p style=''>"+'  交易单号:'+json[p]['transid']+"</p>");
								eleResult.append("<p style=''>"+" 商户单号:"+json[p]['busno']+'  卡号:'+json[p]['cardno']+'  充值金额:'+json[p]['opfare']+"</p>");
								eleResult.append("<p style=''>"+'  处理状态:'+"等待提交"+"</p>");
							}
							else{
								eleResultIng.append("<p style='color:black'>"+'  交易单号:'+json[p]['transid']+"</p>");
								eleResultIng.append("<p style='color:black'>"+" 商户单号:"+json[p]['busno']+'  卡号:'+json[p]['cardno']+'  充值金额:'+json[p]['opfare']+"</p>");
								eleResultIng.append("<p style='color:black'>"+'  处理状态:'+"处理中"+"</p>");
							}
						}
						else{
							eleResultOk.append("<p style='color:green'>"+'  交易单号:'+json[p]['transid']+"</p>");
							eleResultOk.append("<p style='color:green'>"+" 商户单号:"+json[p]['busno']+'  卡号:'+json[p]['cardno']+'  充值金额:'+json[p]['opfare']+"</p>");
							eleResultOk.append("<p style='color:green'>"+'  处理状态:'+"处理完成"+"</p>");
						}
					}
				}
			},
			error:function(XMLHttpRequest,textStatus,errorThrown){
				mui.alert(errorThrown,"上传失败，请检查网络后重试..");
			}
		});
	}
	//
	function setExcel(obj){
		let f = $(obj).val();
		console.log(obj);
		if(f==null || 'undefined'===f || f===''){
			return false;
		}
		let data = new FormData();
		console.log(data);
		$.each($(obj)[0].files,function(i,file){
			data.append('file',file);
		});
		console.log(data);
		$.ajax({
			type:"POST",
			url:"/uploadImg.xhtml",
			data:data,
			cache:false,
			contentType:false,    //不可缺
			processData:false,    //不可缺
			dataType:"json",
			success:function(ret){
				console.log(ret);
			},
			error:function(XMLHttpRequest,textStatus,errorThrown){
				mui.alert(errorThrown,"上传失败，请检查网络后重试.");
			}
		});
	}
	//
	function clearResultDiv(){
		eleResult.html('');
		eleResultOk.html('');
		eleResultIng.html('');
	}
</script>
</body>
</html>